使用 div 元素創建基本形狀

我們將主要使用 <div> 元素來創建形狀。這些形狀通常通過設定寬度、高度、邊框和邊框圓角來實現。

正方形和矩形

<div class="square"></div>
<div class="rectangle"></div>

.square {
    width: 100px;
    height: 100px;
    background-color: blue;
}

.rectangle {
    width: 200px;
    height: 100px;
    background-color: green;
}

圓形和橢圓形

使用 border-radius 屬性可以將正方形轉變為圓形或橢圓形。

<div class="circle"></div>
<div class="ellipse"></div>

.circle {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%; /* 使其成為圓形 */
}

.ellipse {
    width: 150px;
    height: 100px;
    background-color: orange;
    border-radius: 75px; /* 橢圓形 */
}

三角形

使用邊框屬性可以創建三角形。這是一個常用的技巧，通常用於箭頭或其他裝飾元素。

<div class="triangle"></div>

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid purple; /* 這裡的顏色是三角形的顏色 */
}

使用 clip-path 創建複雜形狀

CSS 的 clip-path 屬性允許你創建更複雜的形狀。

<div class="clipped-shape"></div>

.clipped-shape {
    width: 200px;
    height: 200px;
    background-color: teal;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* 三角形 */
}